import { Component, ViewChildren, ElementRef, QueryList, Directive, Input, ViewChild, Renderer2 } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the DomTestPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
@Directive({selector: 'input'})
export class Pane {
  @Input() id: string;
}

@IonicPage()
@Component({
  selector: 'page-dom-test',
  templateUrl: 'dom-test.html',
})
export class DomTestPage {

  inputNum = 0;
  constructor(public navCtrl: NavController, public navParams: NavParams,private renderer: Renderer2) {
  }

  @ViewChild('fields') container:ElementRef;

  addLi(){
    let order = this.inputNum++;
    let li = this.renderer.createElement('li');
    let span =  this.renderer.createElement("span");
    let text = this.renderer.createText("字段"+this.inputNum);
    let input = this.renderer.createElement('input');
    this.renderer.appendChild(span,text);
    
    this.renderer.appendChild(li,span);
    this.renderer.appendChild(li,input);
    this.renderer.listen(li,"click",()=>{
      console.log('the order is '+order);
    })
    this.renderer.appendChild(this.container.nativeElement,li);
  }


}
